<template>
  <a-modal
    v-model:visible="visible"
    title="选择设备"
    width="80%"
    height="600px"
    :body-style="{ padding: '16px 16px 0 16px' }"
    @ok="handleOk"
  >
    <SearchForm
      ref="searchIns"
      v-model:columns="columns"
      :show-add-btn="false"
      :keyword-search-data="searchModel"
      class="!mb-0"
      @search="handleSearch"
    />
    <div class="h-120">
      <SlTable
        :columns="columns"
        row-key="equipmentId"
        :data-source="tableData"
        :row-selection="rowSelection"
        :loading="tableLoading"
        :pagination="pagination"
        :scroll="{ x: 'auto' }"
        :search-model="applySearchModel"
        :custom-row="customRow"
      >
      </SlTable>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import CURD from "/@/api/curd";
import SearchForm from "/@/components/SearchForm.vue";
import SlTable from "/@/components/SlTable.vue";
import { ShowCURDModalOptions, CURDAction, CURDDialogExpose } from "/@/components/CURDDialog/models";
import { useI18n } from "/@/locales/useI18n";
import { onMounted, ref, shallowRef, watch } from "vue";
import TablePage from "/@/components/TablePage.vue";
import { Api } from "/@/api/aiot/equipment";
import { message } from "ant-design-vue";
import { EquipmentItem } from "/@/api/aiot/equipment/models";
import { useCURD } from "/@/hooks/useCURD";
import { getAllIndustrys } from "/@/api/aiot/industry";
import { SelectItem } from "/@/types/components";
import { OrderRule } from "/@/api/models";

const props = defineProps<{
  show: boolean;
  projectId?: string;
}>();
const emits = defineEmits(["update:show", "ok"]);
const { t } = useI18n();
const visible = ref<boolean>(false);
const {
  tableData,
  tableLoading,
  curd,
  reloadTable,
  pagination,
  searchModel: applySearchModel,
} = useCURD<EquipmentItem>({
  getPageUrl: Api.pageEquipments,
  loadOnMounted: false,
});
const createVisible = ref<boolean>(false);
function showCreateModal() {
  createVisible.value = true;
}
const columns = [
  {
    title: t("aiot.equpiment.equipmentName"),
    dataIndex: "equipmentName",
    width: 100,
    ellipsis: true,
  },
  {
    title: "安装位置",
    dataIndex: "location",
    width: 100,
    ellipsis: true,
  },
  {
    title: t("aiot.equpiment.equipmentNo"),
    dataIndex: "equipmentNo",
    width: 100,
    ellipsis: true,
  },
  {
    title: t("aiot.equpiment.brandName"),
    dataIndex: "brandName",
    width: 100,
    ellipsis: true,
  },
];
const searchIns = ref();
const grpIns = ref<CURDDialogExpose>();
const searchModel = [{ key: "searchText", label: "编码或名称" }];
function handleSearch(model) {
  let obj = Object.assign({ projectId: props.projectId }, model);
  reloadTable({ model: obj, current: 1, sort: "brandName", order: OrderRule.ASC });
}
function setGrpShowOptions(options: ShowCURDModalOptions) {
  grpShowOptions.value = options;
}
let curSelectedRow = ref<EquipmentItem[]>([]);
let rowKeys = ref<string[]>([]);
const rowSelection = {
  type: "radio",
  selectedRowKeys: rowKeys,
  onChange: (selectedRowKeys: string[], selectedRows: EquipmentItem[]) => {
    curSelectedRow.value = selectedRows;
    rowKeys.value = selectedRowKeys;
  },
  getCheckboxProps: (record: EquipmentItem) => ({
    // disabled: record.name === "Disabled User", // Column configuration not to be checked
    // name: record.name,
  }),
};
function customRow(record: EquipmentItem) {
  return {
    onClick(e) {
      rowKeys.value = [record.equipmentId as string];
      curSelectedRow.value = [record];
    },
  };
}
async function onSearch(model) {
  await reloadTable({ model });
}
const grpShowOptions = shallowRef<ShowCURDModalOptions>();
watch(
  () => props.show,
  async (v) => {
    visible.value = v;
    if (v) {
      reloadTable({
        model: { projectId: props.projectId, searchText: "" },
        current: 1,
        sort: "brandName",
        order: OrderRule.ASC,
      });
      searchIns?.value?.clearKeyword();
    } else {
      curSelectedRow.value = [];
      rowKeys.value = [];
    }
  }
);
watch(visible, (v) => {
  emits("update:show", v);
});
function handleOk() {
  if (curSelectedRow.value?.length > 0) {
    emits("update:show", false);
    emits("ok", curSelectedRow.value);
  }
}
</script>
